import {PlusOutlined} from '@ant-design/icons';
import {
    DrawerForm,
    ModalForm,
    ProForm,
    ProFormDateRangePicker,
    ProFormSelect,
    ProFormText,
} from '@ant-design/pro-components';
import {Button, Space, message, Flex, Avatar, Divider, Input, Form, Checkbox} from 'antd';
import React, {PropsWithChildren, useEffect, useState} from 'react';


const OffLineForm: React.FC<PropsWithChildren<any>> = (props) => {

    useEffect(() => {
        // componentDidMount
        console.log(props.user.status)

        // componentDidUpdate
        return () => {
            // componentWillUnmount

        };
    }, []);

    return (
        <DrawerForm
            title="强制用户下线"
            open={props.offlineModalVisible}
            width={400}
            onOpenChange={(value) => !value && props.cancelOfflineModal()}
            onFinish={async (values) => await props.offlineModalFinish(values, props.user.userID)}
        >
            <Flex vertical={false}>
                <Avatar shape="square" size={60} src={props.user.faceURL}/>
                <Flex vertical={true} justify='center' style={{marginLeft: '20px'}}>
                    <div>{props.user.nickname}</div>
                    <div>{props.user.userID}</div>
                </Flex>
            </Flex>
            <Divider/>

             {
                 props.user.status && props.user.status.singlePlatformToken.map(({platform, total, token}) => (<Form.Item
                    name={platform}
                    valuePropName="checked"
                >
                    <Checkbox>{platform}</Checkbox>
                </Form.Item>))
            }


        </DrawerForm>
    );
};
export default OffLineForm;
